<template>
  <a-modal
    v-model="visible"
    :maskClosable="false"
    :closable="false"
    :keyboard="false"
    width="70vw"
    :bodyStyle="{ padding: '10px' }"
    title="高级搜索"
  >      
    <a-form-model :model="dataForm" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="24" v-for="parent of modelList" :key="parent.id">
        <a-col :span="8" v-for="child of parent.children" :key="child.model">
          <a-form-model-item :label="child.label">
            <template v-if="child.type == 'input'" >
              <a-input v-model="dataForm[child.model]" allowClear :maxLength="100"/>            
            </template>
            <template v-if="child.type == 'select'">
              <a-select v-model="dataForm[child.model]" :dropdownMatchSelectWidth="false" allowClear>
                <a-select-option v-for="(item, index) of child.dictList" :key="index" :value="item.code">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </template>
            <template v-if="child.type == 'dateRange'">
              <a-date-picker valueFormat="YYYY-MM-DD" v-model="dataForm[child.dateRangeStartModel]" placeholder="开始时间" style="width: 50%"/>
              <a-date-picker valueFormat="YYYY-MM-DD" v-model="dataForm[child.dateRangeEndModel]" placeholder="结束时间"  style="width: 50%"/>
            </template>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <template slot="footer">
      <div class="footer-line">
        <a-button  @click="closeResulte">关 闭</a-button>
        <a-button  @click="resetResulte">重 置</a-button>
        <a-button type="primary" @click="callBackResult">确 定</a-button>
      </div>
    </template>
  </a-modal> 
</template>
<script>
import {getActionAsync} from '@/api/manage'
export default {
  name: 'AdvancedSearch',
  props: {
    dataForm: {
      type: Object,
      default: {}
    },
    formCol: {
      type: Array,
      default: [] // {type: 'input', model: 'cgNo', label: '部门名称'},
    },
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },      
      modelList: [],
    }
  },
  mounted() {
    this.getPayInfoData();
  },
  methods: {
    getPayInfoData() {
      const num = 3;
      this.modelList = [];
      const totalPage = Math.ceil(this.formCol.length / num);
      this.formCol.forEach(async (item, index) => { 
        if(item.type == 'select'){
          if(item.paramsType){
            item.dictList = await this.getDictData('', '', item.paramsType)
          }
        }
      })
      for (let j = 0; j < totalPage; j++) {        
        const start = j * num
        const end = start + num
        const pageNowData = this.formCol.slice(start, end)
        this.modelList.push({children: pageNowData, id: 'parent'+j})
      }
    },
    async getDictData(url, params, type){
      let list = []
      const par = params || {type, pageSize:-1, isdel: 0}
      await getActionAsync(url || '/manage/codeInfo/list', par).then((res) => {
        if (res.code == 200) {
          list = res.result.records || []
        } else {
          this.$message.warning('操作异常:' + res.message)
        }
      }).catch((res) => {
        this.$message.warning('操作异常:' + res.message)
      })
      return list
    },    
    closeResulte(){
      this.$emit('close')   
    },
    resetResulte(){
      this.$emit('reset')   
    },
    callBackResult(){
      this.$emit('ok')   
    },
  },
}
</script>
<style lang="less" scoped></style>
